<template>
<div id="month">
  <component-header :title="title" :path="path" :time="para.time"></component-header>
  <zcfx-loadmore :top-method="loadTop" :auto-fill="false" ref="loadmore" class="loadingMonth">
    <div class="main">
      <div class="profit">
        <div class="choose-date">
          <div class="show-date">{{this.para.time.split('').splice(4,2).join('')}}月/{{this.para.time.split('').splice(0,4).join('')}}</div>
          <popup-picker :title="'日期选择'" :column="2" :data="date" @change="chooseDate" :value="initialPicker">
            <img src="~@/assets/images/time-pick.png" class="time-pick" @click="appEvent">
          </popup-picker>
        </div>
        <profit :time="para.time" :wrong-date="wrongDate" :monthstatus='para.monthStat'></profit>
      </div>
      <defeat :time="para.time" :monthstatus='para.monthStat'></defeat>
      <exceed :time="para.time" :monthstatus='para.monthStat'></exceed>
      <stock-ope :fathertime="para.time" :monthstatus='para.monthStat'></stock-ope>
      <my-performance :fathertime="para.time" :monthstatus='para.monthStat'></my-performance>
      <div class="blankL"></div>
      <div id="abilitiesContainer">
        <ul class="abilities">
          <li v-for="item,index in abilities" :class="item.active" @click="switchAbility(item,index)">{{item.text}}</li>
        </ul>
        <div class="boxShadow" style="height:1px;"></div>
        <profit-ability v-if="abilities[0].show" :fathertime="para.time"   :monthstatus = 'para.monthStat'></profit-ability>
        <choose-ability v-if="abilities[1].show" :time="para.time"   :monthstatus = 'para.monthStat'></choose-ability>
        <control-ability v-if="abilities[2].show" :fathertime="para.time" :parentDay="para.days"   :monthstatus = 'para.monthStat'></control-ability>
        <perception-ability v-if="abilities[3].show" :fathertime="para.time" :parentDay="para.days"   :monthstatus = 'para.monthStat'></perception-ability>
        <risk-ability v-if="abilities[4].show" :time="para.time"   :monthstatus = 'para.monthStat' @showmodal="showModal"></risk-ability>
      </div>
    </div>
  </zcfx-loadmore>

  <div class="modal" v-show="activeModal">
    <div class="modal-dialog">
      <div class="modal-title">
        <div class="title-text">
          风险控制说明
          <img src="~@/assets/images/close.png" @click="closeModal">
        </div>
      </div>
      <div class="modal-content">
        <div class="content-title">风险控制：</div>
        <div class="content-text">风险收益比率越高，说明单位风险带来的回报越多；收益波动率越低，说明收益越稳定。（数值仅供参考）</div>
      </div>
      <div class="modal-btn" @click="closeModal">我知道了</div>
    </div>
  </div>

  <component-footer :page="page"></component-footer>
</div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import PopupPicker from '@/components/popup-picker'
import StockOpe from './month/StockOpe'
import MyPerformance from './month/MyPerformance'
import Profit from './month/Profit'
import Defeat from './month/Defeat'
import Exceed from './month/Exceed'
import ProfitAbility from './month/ProfitAbility'
import ChooseAbility from './month/ChooseAbility'
import ControlAbility from './month/ControlAbility'
import PerceptionAbility from './month/PerceptionAbility'
import RiskAbility from './month/RiskAbility'
import RemoteDAO from '@/common/remoteDAO'
import Jquery from 'jquery'
import LoadMore from '@/components/common/LoadMore'
import Cache from '@/common/cache'

export default {
  data() {
    return {
      page: 2,
      title: '月度分析',
      path: '/pages/Month',
      para: {
        time: '',
        days: '',
        monthStat: null
      },
      abilities: [{
          name: 'ProfitAbility',
          text: '收益能力',
          active: 'active',
          show: true,
          tdapp: '002017'
        },
        {
          name: 'ChooseAbility',
          text: '选股能力',
          active: '',
          show: false,
          tdapp: '002018'
        },
        {
          name: 'ControlAbility',
          text: '仓位控制',
          active: '',
          show: false,
          tdapp: '002019'
        },
        {
          name: 'PerceptionAbility',
          text: '盘面感知',
          active: '',
          show: false,
          tdapp: '002020'
        },
        {
          name: 'RiskAbility',
          text: '风险控制',
          active: '',
          show: false,
          tdapp: '002021'
        },
      ],
      date: [
        [],
        []
      ],
      initialPicker: [],
      wrongDate: false,
      lastDate: '',
      switchIndex: 0,
      setMonIndex: 0,
      clickStatus: 0,
      activeModal:false
    }
  },
  created() {
    for (let i = 2016; i <= 2018; i++) {
      this.date[0].push(i);
    }
    for (let i = 1; i <= 12; i++) {
      if (i < 10) {
        this.date[1].push('0' + i);
      } else {
        this.date[1].push(i);
      }
    }

    if (!this.$store.state.selectedDate) {
      let self = this
      let obj = {
        "pagenum": '',
        "recent": ''
      }
      RemoteDAO.callZL13100031(obj, self.ZL13100031)
    }
    this.switchIndex = this.$store.state.selectedTime
    this.initialPicker.push(this.$store.state.selectedDate.slice(0, 4))
    this.initialPicker.push(this.$store.state.selectedDate.slice(4, 6))
    this.para.time = this.$store.state.selectedDate
    this.lastDate = this.$store.state.lastDate

    this.tradeDate(this.initialPicker[0], this.initialPicker[1])

    this.setMonIndex = this.$store.state.monthIndex
    this.abilities.forEach(function(value) {
      value.active = '';
      value.show = false
    });
    this.abilities[this.setMonIndex].active = 'active';
    this.abilities[this.setMonIndex].show = true;
  },
  mounted() {
    TDAPP.onEvent('002029', '');
    TDAPP.send();

    $(document).scrollTop(this.$store.state.monthTop)

    window.addEventListener('scroll', this.scrollFunction)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollFunction)
  },
  methods: {
    loadTop() {
      Cache.clear();
      this.para.monthStat == 0 ? this.para.monthStat = 1 : this.para.monthStat = 0;
      this.$refs.loadmore.onTopLoaded();
    },
    monthDays(year, month) {
      month = parseInt(month, 10)
      let d = new Date(year, month, 0)
      return d.getDate()
    },
    getNowDate() {
      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth();
      let day = today.getDate();
      let nowMonth = today.getMonth() < 9 ? '0' + (today.getMonth() + 1) : '' + (today.getMonth() + 1);
      let nowDate = year + '' + nowMonth + '' + day
      return nowDate
    },
    tradeDate(year, month) {
      let y = parseInt(year);
      let m = parseFloat(month);
      let mDays = this.monthDays(y, m)
      m = m < 10 ? '0' + m : m
      let startDays = y + '' + m + '01';
      let nDate = this.getNowDate();
      let nowYear = parseFloat(nDate.substr(0, 4));
      let nowMonth = parseFloat(nDate.substr(4, 2)) < 10 ? "0" + parseFloat(nDate.substr(4, 2)) : parseFloat(nDate.substr(4, 2));
      let nowDay = parseFloat(nDate.substr(6, 2)) < 10 ? "0" + parseFloat(nDate.substr(6, 2)) : parseFloat(nDate.substr(6, 2));
      let eDays;
      if (y < nowYear || parseFloat(m) < nowMonth) {
        eDays = y + '' + m + mDays
      } else {
        eDays = nowYear + '' + nowMonth + '' + nowDay
      }
      this.para.days = startDays + '~' + eDays;
    },
    switchAbility: function(item, index) {

      this.$store.dispatch('setMonthIndex', index);


      if (this.clickStatus != index) {
        TDAPP.onEvent(this.abilities[index].tdapp, '');
        TDAPP.send();
      }
      this.clickStatus = index;

      this.abilities.forEach(function(value) {
        value.active = '';
        value.show = false
      });
      item.active = 'active';
      item.show = true;

    },
    chooseDate(arr) {
      var year = arr[0];
      var month = arr[1];
      var dateString = year + month;
      let current = this.lastDate;

      this.tradeDate(year, month)

      if (arr[0] > parseInt(current.slice(0, 4))) {
        this.wrongDate = true;
      } else if (arr[0] == parseInt(current.slice(0, 4)) && parseInt(arr[1]) > parseInt(current.slice(4, 6))) {
        this.wrongDate = true;
      } else {
        this.wrongDate = false;
        this.para.time = dateString;
        this.$store.dispatch('setSelectedDate', dateString);
      }
    },
    ZL13100031(result) {
      let data = result.data;
      let bigdata = JSON.parse(data).body[0].bigdata;
      let specData = JSON.parse(bigdata).hits.hits;
      let curMonth = specData.filter(value => {
        return value._source.recent == 'curmonth'
      })
      let initialDate = curMonth[0]._source.begin_date.slice(0, 6)
      if (!this.$store.state.selectedDate) {
        this.$store.dispatch('setSelectedDate', initialDate)
        this.$store.dispatch('setLastDate', initialDate)
      }
      this.initialPicker.push(this.$store.state.selectedDate.slice(0, 4))
      this.initialPicker.push(this.$store.state.selectedDate.slice(4, 6))
      this.para.time = this.$store.state.selectedDate
      this.lastDate = this.$store.state.lastDate
    },
    scrollFunction() {
      this.$store.dispatch('setMonthTop', $(document).scrollTop())
    },
    appEvent() {
      TDAPP.onEvent('002016', '');
      TDAPP.send();
    },
    showModal(){
      this.activeModal=true
    },
    closeModal(){
      this.activeModal=false
    }
  },
  components: {
    'component-header': Header,
    'component-footer': Footer,
    'popup-picker': PopupPicker,
    'profit': Profit,
    'defeat': Defeat,
    'exceed': Exceed,
    'stock-ope': StockOpe,
    'my-performance': MyPerformance,
    'profit-ability': ProfitAbility,
    'choose-ability': ChooseAbility,
    'control-ability': ControlAbility,
    'perception-ability': PerceptionAbility,
    'risk-ability': RiskAbility,
    'zcfx-loadmore': LoadMore
  }
}
</script>

<style scoped>
#month {
  margin-top: 88px;
  background: #fff;
  z-index: 0;
  padding-bottom: 100px;
}

.profit {
  height: 260px;
  box-sizing: border-box;
  background-image: url(~@/assets/images/banner.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-sizing: border-box;
  color: #fff;
}

.choose-date {
  height: 70px;
  padding: 15px 30px;
  box-sizing: border-box;
  font-size: 28px;
  opacity: 0.8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.time-pick {
  padding-left: 40px;
  height: 40px;
}

.abilities {
  height: 80px;
  background: #fff;
  font-size: 24px;
  color: #555;
  z-index: 2;
  position: relative;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}

.boxShadow {
  height: 1px;
  background: #ddd;
  box-shadow: 0 0 6px 0 rgba(34, 34, 34, 0.4);
  z-index: 1;
  position: relative;
}

.abilities li {
  height: 100%;
  line-height: 80px;
}

.abilities .active {
  color: #309fea;
  border-bottom: 6px solid #309fea;
  box-sizing: border-box;
}

.blankL {
  height: 14px;
  background-color: #f6f6f6;
}
.modal{
  width: 100%;
  height: 1800px;
  position: fixed;
  top: 0;
  z-index: 999999999;
  background: rgba(0,0,0,0.6);
}
.modal-dialog{
  width: 600px;
  height: 460px;
  background: #fff;
  border-radius: 12px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.modal-title{
  width: 100%;
  height: 90px;
  padding: 0 30px;
  box-sizing: border-box;
}
.title-text{
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ddd;
  font-size: 32px;
  color: #808080;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-text img{
  height: 30px;
}
.modal-content{
  width: 100%;
  height: 270px;
  padding: 0 40px;
  box-sizing: border-box;
}
.content-title{
  width: 100%;
  height: 80px;
  font-size: 30px;
  color: #555;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content-text{
  width: 100%;
  font-size: 28px;
  color: #555;
}
.modal-btn{
  width: 100%;
  height: 100px;
  border-top: 1px solid #ddd;
  font-size: 30px;
  color: #369fea;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loadingMonth{
  overflow: hidden;
}
</style>
